<template>
  <div class="hello">
    <div class="markdown-body" v-html="details">
    </div>
    <div style="display: flex;margin: 20px 0px">
      <el-button type="danger" style="margin-right: 5px">博客标题</el-button> <el-input v-model="blog.title" placeholder="请输入标题"/>
      <el-button type="danger" plain @click="publish">发表博客</el-button>
    </div>
    <div style="display: flex;margin: 20px 0px">
      <el-button type="danger" style="margin-right: 5px">博客简介</el-button> <el-input v-model="blog.description" placeholder="请输入简介"/>
    </div>
    <div style="margin: 10px 0px;display: flex">
      <div style="margin-right:10px">
        <el-upload
          class="upload-demo"
          action="http://localhost:7002/file/uploadOssFile"
          multiple
          :limit="3"
          :on-success="cover"
          :file-list="fileList">
          <el-button size="small" type="primary">上传封面</el-button>
        </el-upload>
      </div>
     <div style="margin: 0px 20px">
       <el-switch
         v-model="blog.write"
         active-text="原创"
         inactive-text="转载">
       </el-switch>
     </div>
     <div>
       <el-tag
         :key="tag"
         v-for="tag in dynamicTags"
         closable
         :disable-transitions="false"
         @close="handleClose(tag)">
         {{tag}}
       </el-tag>
       <el-input
         class="input-new-tag"
         v-if="inputVisible"
         v-model="inputValue"
         ref="saveTagInput"
         size="small"
         @keyup.enter.native="handleInputConfirm"
         @blur="handleInputConfirm"
       >
       </el-input>
       <el-button v-else class="button-new-tag" size="small" @click="showInput">新增标签</el-button>
     </div>
    </div>
    <div>
      <el-upload
        class="upload-demo"
        action="http://192.168.101.5:7002/file/uploadOssFile"
        multiple
        :limit="3"
        :file-list="fileList">
      </el-upload>
    </div>
    <mavon-editor v-model="blog.content" ref="md"  @imgAdd="imgAdd" />
  </div>
</template>
<script>
  import {uploadFileRequest,preserve} from "../api/axiosRequest";
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    data(){
      return{
        blog:{
          title:'',
          description:'',
          content:'',
          /*封面地址*/
          coverUrl:'',
          /*0原创1转载*/
          write:'',
          userId:1,
          /*标签*/
          // label:[],
        },
        /*标签*/
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        /*标签结束*/
        value: true,
        content:'',
        details:'',
        imageUrl:'',
        topic:'',
        but:['保存题目','保存解析','保存参考答案','预览测试'],
        fileList: [],
      }
    },
    created() {
      this.test()
    },
    methods:{
      test(){
        console.log("==========================");
        console.log(this.content);
        var MarkdownIt = require("markdown-it");
        var md  = new MarkdownIt();
        var result = md.render(this.content);
        this.details = result;
        console.log(this.details)
      },
      imgAdd(pos,$file){
        console.log($file)
        //this.$refs.md.$imglst2Url([[pos,$file.miniurl]])
        var _this = this;
        //console.log("图片上传===============");
        console.log($file.name+"文件名===================");
        var formdata = new FormData();
        formdata.append('file',$file);
        console.log("+++="+formdata);
        uploadFileRequest("/file/uploadOssFile",formdata).then(res=>{
          console.log(res)
          this.imageUrl = res.data.data
          //成功md是ref定义的内容 pos是文件数量 第二个参数是回显的图片地址
          _this.$refs.md.$imglst2Url([[pos,this.imageUrl]])
        });
      },
      /*标签*/
      handleClose(tag) {
        console.log(tag)
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      /*标签结束*/
      /*发表博客*/
      publish(){
        this.blog.label = this.dynamicTags;
        if(this.blog.write){
          this.blog.write=0
        }else{
          this.blog.write=1
        }
        this.blog.userId = this.$route.params.myId;
        console.log(this.$route.params.myId);
        preserve("/blog/saveSingle",this.blog).then(res =>{
          if(res.data.code ===200){
            this.$message({
              message: '恭喜你，发布博客成功',
              type: 'success'
            });
            this.blog='';
          }
        });
        console.log('发表博客')
        console.log(this.blog)
        console.log(this.dynamicTags);
      },
      /*封面上传后返回的结果*/
      cover(response, file, fileList){
        if(response.code === 200){
          this.blog.coverUrl =response.data;
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
